<template>
  <div class="bigbox">
    <div class="img">
      <div class="login">
        <div class="header">
          <h1>欢迎注册家政预约平台账户</h1>
        </div>
        <h1 class="logintitle">注册：</h1>
        <input
          class="topinp"
          type="text"
          placeholder="用户名"
          required
          v-model="username"
        />

        <br />
        <input type="text" placeholder="电子邮箱" v-model="email" />

        <input
          type="password"
          placeholder="密码"
          required
          v-model="password1"
        />

        <input
          type="password"
          placeholder="确认密码"
          @keyup.enter.native="regis"
          required
          v-model="password2"
        />
        <br />

        <div v-if="vali">
          <div class="error" v-html="msg"></div>
        </div>
        <input type="submit" @click.prevent="regis" value="Register" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserReg",
  data() {
    return {
      username: "",
      password1: "",
      password2: "",
      email: "",
      vali: "",
      msg: "",
      errormsg: {
        incommsg: "",
        corrmsg: "",
      },
    };
  },
  methods: {
    validate: function () {
      var pPattern =
        /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

      var ePattern =
        /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      this.errormsg.incommsg = "";
      this.errormsg.corrmsg = "";
      this.vali = false;
      this.msg = "";

      if (this.password2 == "") {
        this.vali = true;
        this.errormsg.corrmsg = "请输入确认密码!<br/>";
      } else {
        if (!pPattern.test(this.password2)) {
          this.vali = true;
          this.errormsg.corrmsg =
            "密码最少6位，包括至少1个大写字母，<BR/>1个小写字母，1个数字，1个特殊字符<br/>";
        } else if (this.password1 != this.password2) {
          this.vali = true;
          this.errormsg.corrmsg = "密码不一致!<br/>";
        }
      }
      if (this.password1 == "") {
        this.vali = true;
        this.errormsg.corrmsg = "请输入密码!<br/>";
      } else {
        if (!pPattern.test(this.password1)) {
          this.vali = true;
          this.errormsg.corrmsg =
            "密码最少6位，包括至少1个大写字母，<br/>1个小写字母，1个数字，1个特殊字符<br/>";
        }
      }
      if (this.email == "") {
        this.vali = true;
        this.errormsg.incommsg = "请完善信息!<br/>";
      } else {
        if (!ePattern.test(this.email)) {
          this.vali = true;
          this.errormsg.corrmsg = "请输入正确邮箱！</br>";
        }
      }
      if (this.username == "") {
        this.vali = true;
        this.errormsg.incommsg = "请完善信息!<br/>";
      } else {
        if (this.username.length < 4) {
          this.vali = true;
          this.errormsg.corrmsg = "账号长度不得少4于位!<br/>";
        }
      }
      if (this.errormsg.incommsg == "") {
        this.msg = this.errormsg.corrmsg;
      } else {
        this.msg = this.errormsg.incommsg;
      }
      return this.vali;
    },

    regis() {
      if (this.validate()) {
        if (
          this.username == "admin" &&
          this.password1 == "admin" &&
          this.email == "admin" &&
          this.password2 == "admin"
        ) {
          this.username = "";
          this.email = "";
          this.password1 = "";
          this.password2 = "";

          alert("注册成功");
          this.$router.push("/userlogin");
        } else {
          this.axios
            .post("http://localhost:7777/user/register", {
              userName: this.username,
              password: this.password1,
              email: email,
            })
            .then((response) => {
              if (response.data.code === 200) {
                this.username = "";
                this.email = "";
                this.password1 = "";
                this.password2 = "";

                alert("注册成功!");
                this.$router.replace("/adminlogin");
              } else {
                this.username = "";
                this.email = "";
                this.password1 = "";
                this.password2 = "";

                alert("注册失败，请重新注册！");
                this.$router.replace("/adminreg");
              }
            });
        }
      }
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
}
.img {
  height: 41rem;
  width: 77rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../assets/2.png");
  background-size: contain;
  z-index: -999;
}

.login {
  position: relative;
  width: 35rem;
  height: 30rem;
  right: 0rem;
  top: 7rem;
  left: 40rem;
}

.header h1 {
  color: #272727;
  font-weight: 700;
  font-size: 22px;
  border-bottom: 1px solid #e7e0e0;
  margin-top: -13px;
  padding-bottom: 20px;
}
input {
  width: 55%;
  height: 40px;
  margin-top: 18px;
}
.logintitle {
  font-size: 20px;
  margin-bottom: 20px;
}
.regis {
  font-size: 15px;

  cursor: pointer;
}
input[type="submit"] {
  width: 200px;
  background-color: #3e81b8;
  color: white;
  font-weight: bold;
}
input[type="submit"]:hover {
  background: #2e2d2d;
  color: #fff;
}
.topinp {
  margin-top: 0px;
}
.error {
  color: #a54141;
  height: 100%;
  width: 56%;
  margin: 0 auto;
  margin-bottom: 0px;
  font-size: 14px;
  text-align: left;
}
</style>
